<template>
  <canvas
      id="heat-furnace"
      :width="canvas.width"
      :height="canvas.height"
      style="background-color: rgb(252, 252, 252); border: 1px solid black"
  ></canvas>
</template>

<script>
import {draw, refresh} from "@/svgutil/canvas-draw";
import {drawDataInitScale, round} from "@/svgutil/comm-method";
import {defineData} from "./heat-furnace-data";


export default {
  name: "heat-furnace",
  data() {
    return {
      canvas: {
        initWidth: 500,
        initHeight: 800,
        width: 500,
        height: 800,
      },
      canvasEle: null,
      drawDataList: [],
      values: {
        'P001': {v: 1.23, w: 0},
        'P002': {v: 2.99, w: 1},
      },
    };
  },
  mounted() {
    this.canvasEle = draw("heat-furnace", this.createInitData, this.values);
    setInterval(() => {
      this.values.P001 = {v: round(Math.random() * 100, 2), w: Math.round(Math.random())};
      refresh(this.canvasEle, this.drawDataList, this.values);
    }, 2000);
  },
  methods: {
    createInitData() {
      this.drawDataList[0] = defineData(this.values);

      drawDataInitScale(this.drawDataList, 1, false, false);
      return this.drawDataList;
    },
  },
};
</script>

<style scoped></style>